<template>
  <div class="page loading-bg">
    <div class="barBox">
      <div class="bar"></div>
    </div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.loading-bg {
  .barBox {
    margin: 50px auto;
    padding: 0;
    width: 600px;
    height: 20px;
    overflow: hidden;
    border: 1px solid #008fc8;
  }
  .barBox .bar {
    margin: 0;
    height: 20px;
    width: 0;
    background: repeating-linear-gradient(60deg, #9bcbff 0px, #9bcbff 15px, #008fc8 15px, #008fc8 30px);
    background-size: 35px 20px;
    animation: loading3-loading 1s infinite linear;
    transition: 3s linear;
  }
  .barBox:hover .bar {
    width: 600px;
  }
  @keyframes loading3-loading {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 35px 0;
    }
  }
}
</style>